<script setup lang="ts">
import {onMounted, ref, watchEffect} from "vue";
import {useCounterStore} from "@/stores/counter.ts";
import {info} from '@/api/production.ts'
const counter = useCounterStore()
const baseUrl=import.meta.env.VITE_API_URL;
const route=counter.route
const productionInfo=ref()
const getProductionInfo=(id)=>{
  info(id).then(res=>{
    productionInfo.value=res.data
  })
}
watchEffect(()=>{
  getProductionInfo(route.params.productionInfoId)
  if (counter){
    counter.scrollToTop()
  }
})
onMounted(() => {
  counter.scrollToTop()
})
const previewList = ref([]) // 预览图片url列表
const showView = ref(false)

const onPreview = (url:string) => {
  previewList.value = [url]
  showView.value = true
}

// 关闭预览
const viewClose = () => {
  showView.value = false
}
</script>

<template>
  <div>
    <el-carousel class="el-carousel__item" :autoplay="false" indicator-position="none" arrow="never">
      <el-carousel-item v-for="item in 1" :key="item">
        <h3 class="small">
          <img v-img-lazy="baseUrl+productionInfo.cover" v-if="productionInfo && productionInfo.cover"/>
          <div class="shuffingtext"  v-if="item == 1">
            <span>{{productionInfo && productionInfo.introduction ? productionInfo.introduction:''}}</span>
            <span class="spansmall">{{productionInfo && productionInfo.introductionSmall ? productionInfo.introductionSmall:''}}</span>
          </div>
        </h3>
      </el-carousel-item>
    </el-carousel>
    <div class="productioninfo">
      <h1 class="title">{{productionInfo && productionInfo.name ? productionInfo.name:''}}</h1>
      <div class="desc">{{productionInfo && productionInfo.introduction ? productionInfo.introduction:''}}</div>
      <div style="width: 100%;display: flex;justify-content: center;">
        <div v-if="productionInfo && productionInfo.mainImg"  class="image-container">
          <img v-for="item in productionInfo.mainImg.split(',')" v-img-lazy="baseUrl+item"  @click="onPreview(baseUrl+item)">
          <el-image-viewer
              :hide-on-click-modal="true"                  @close="viewClose" v-if="showView" :url-list="previewList"/>
        </div>
      </div>

    </div>

  </div>
</template>

<style scoped>
.shuffingtext{
  display: flex;align-items: center;flex-direction: column
}
.spansmall{
  font-size: 20px;
  //margin-top: 10px;
  color: #82aa82;
  font-weight: 500;
}
.desc{
  margin-top: 30px;
  margin-bottom: 60px;
  text-align: center;
  font-size: 18px;
  opacity: 0.75;
  font-family: "Lucida Console", "Courier New", monospace;
}
.image-container {
  cursor: pointer;
  width: 70%;
  display: flex;
  flex-wrap: wrap; /* 允许子元素换行 */
  justify-content: space-around; /* 图片之间的间距 */
  align-items: center; /* 垂直居中 */
}

.image-container img {
  width: 32%; /* 或者使用百分比，根据需要调整 */
  height: auto;
  margin: 5px; /* 图片之间的外边距 */
  border-radius: 5px;
}
.title{
  text-align: center;
  padding: 50px;
}
.productioninfo{
  margin-top: 50px;
  margin-bottom: 50px;
}
.el-carousel__item {
  height: 100vh;
}
.el-carousel__item h3 {
  color: #694747;
  font-size: 14px;
  opacity: 1;
  line-height: 300px;
  margin: 0;
  text-align: center;
}
.el-carousel__item h3 div{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  //font: italic bold 40px '新宋体';
  color: #a1a111;
  font-weight: bolder;
}


.small {
  width: 100%;
  height: 100%;
}
.small img{
  width: 100%;
  height: 100%;
  object-fit: fill;
}
@media (max-width: 1280px) {
  .image-container img {
    transition: transform 0.2s;
    margin: 0 auto;
  }
  .image-container img:hover{
    transform: scale(2);
  }
}
@media (max-width: 540px) {
  .el-carousel__item h3 div{
    font-size: 16px;
  }
  .spansmall{
    font-size: 14px;
  }
  .image-container{
    width: 100%;
    padding: 5px;
  }
}
</style>